<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="原密码" prop="oldpass">
      <el-input v-model="ruleForm.oldpass" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item label="新密码" prop="newpass">
      <el-input v-model="ruleForm.newpass" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item label="重复密码" prop="checkPass">
      <el-input
        v-model="ruleForm.checkPass"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="submitForm(ruleFormRef)"
        :disabled="btnbool"
      >
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)"> 重置 </el-button>
    </el-form-item>
  </el-form>
</template>
  
  <script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import type { FormInstance } from "element-plus";
import apiUrl from "../api/urls";
import link from "../api/link";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

//路由跳转
const router = useRouter();
//
const ruleFormRef = ref<FormInstance>();

//密码输入时的提示
const validatePass1 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};
const validatePass3 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (value !== ruleForm.newpass) {
    callback(new Error("两次输入不一致"));
  } else {
    callback();
  }
};

//密码对象
const ruleForm = reactive({
  oldpass: "",
  newpass: "",
  checkPass: "",
});

//密码规则
const rules = reactive({
  oldpass: [{ validator: validatePass1, trigger: "blur" }],
  newpass: [{ validator: validatePass2, trigger: "blur" }],
  checkPass: [{ validator: validatePass3, trigger: "blur" }],
});

// 1.创建一个变量用来控制按钮是否能点击
let btnbool = ref(true);

watch(ruleForm, (newval) => {
  console.log(newval);
  // 判断是登录还是注册

  // 注册
  if (newval.oldpass != "" && newval.newpass != "" && newval.checkPass != "") {
    btnbool.value = false;
  } else {
    btnbool.value = true;
  }
});

// 提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log(ruleForm);
      if (ruleForm.oldpass === localStorage.getItem("mima")) {
        let id = localStorage.getItem("dengid");
        const data = {
          uname: localStorage.getItem("token"),
          pwd: ruleForm.newpass,
        };

        link(apiUrl.register + "/" + id, "PUT", data).then((res: any) => {
          console.log(res);
        });
        ElMessage({
          type: "success",
          message: "修改成功，重新登录",
        });
        router.push("/login");
      } else {
        ElMessage({
          type: "error",
          message: "修改失败，重新输入原密码",
        });
      }
    } else {
      console.log("提交失败");
      return false;
    }
  });
};

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped lang="scss">
.el-form {
  width: 400px;
  position: relative;
  top: 250px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>